<template>
  <Tinymce v-bind="bindProps" @change="onChange" />
</template>

<script lang="ts">
  import { computed, defineComponent } from 'vue'

  import { Tinymce } from '/@/components/Tinymce'
  import { propTypes } from '/@/utils/propTypes'

  export default defineComponent({
    name: 'JEditor',
    components: { Tinymce },
    // 不将 attrs 的属性绑定到 html 标签上
    inheritAttrs: false,
    props: {
      value: propTypes.string.def(''),
      disabled: propTypes.bool.def(false),
    },
    emits: ['change', 'update:value'],
    setup(props, { emit, attrs }) {
      // 合并 props 和 attrs
      const bindProps = computed(() => Object.assign({}, props, attrs))

      // value change 事件
      function onChange(value) {
        emit('change', value)
        emit('update:value', value)
      }

      return {
        bindProps,
        onChange,
      }
    },
  })
</script>

<style lang="less" scoped></style>
